<template>
	<view class="productBox">
		<u-image :lazy-load="true" :src="$u.file.getMedieUrl(goodsDetail.image)" @click="confirm(item.id)" style="height: 160rpx; width: 160rpx"></u-image>
		<view class="middle-box">
			<uni-tooltip :content="goodsDetail.order">
				<view class="productBox-tittle">Name : {{ goodsDetail.name }}</view>
			</uni-tooltip>
			<uni-tooltip :content="goodsDetail.intro">
				<view class="productBox-intro">
					{{ goodsDetail.intro }}
				</view>
			</uni-tooltip>
			<view class="productBox-price">By : {{ goodsDetail.by }}</view>
			<view class="time-box">
				Qty : {{ goodsDetail.qty }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'goodsOrder',
	props: {
		//数据
		goodsDetail: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			appBaseUrl: process.uniEnv.COSHost
		};
	},
	methods: {
		confirm(id) {
			this.$emit('getGoodsInfo', id);
		}
	}
};
</script>

<style lang="scss" scoped>
.productBox {
	background: #ffffff;
	border-radius: 26rpx 26rpx 26rpx 26rpx;
	margin: 20rpx;
	padding: 20rpx;
	display: flex;
	// padding-bottom: 10px;
	// justify-content: space-between;

	.middle-box {
		width: 530rpx;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.productBox-tittle {
			font-size: 26rpx;
			color: #000000;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.productBox-intro {
			font-size: 28rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #3b3b3b;
		}
		.productBox-price {
			font-size: 24rpx;
			color: #a8a8a8;
			font-weight: 400;
		}
		.time-box {
			font-weight: 400;
			color: #616161;
			font-size: 24rpx;
		}
	}
}
</style>
